<template>
  <div class="article">
    <el-row :gutter="10" justify="center">
      <el-col :xs="24" :sm="24" :md="16" :lg="16">
        <el-card shadow="never" class="el-card">
          <template #header>
            <el-page-header title="返回上级" @back="$router.back()" content="文章详情"> </el-page-header>
            <el-page-header title="返回首页" @back="$router.push('/homepage')"> </el-page-header>
          </template>
          <h1 style="text-align: left;color: chocolate">{{ article.articleTitle }}</h1><br>
          <div style="text-align: left">
            <strong>
              <i class="iconfont icon-yonghuming"/> 作者：{{article.author}}&nbsp;&nbsp;&nbsp;&nbsp;
              <i class="iconfont icon-wenzhangfenlei"/> 文章分类：{{ article.articleType==='NEWS' ? '景区新闻' : '景区公告' }}
              &nbsp;&nbsp;&nbsp;
              <i class="iconfont icon-date"/> 发布日期：{{article.publishTime}}
            </strong>
          </div>
          <el-divider/>
          <div style="text-align: left;" v-html="article.articleContent" />
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import {getDetailDeleted} from "@/api/multimedia";

export default {
  name: "showArticleDeleted",
  data(){
    return{
      article:{}
    }
  },
  created() {
    this.getArticleDetail()
  },
  methods:{
    getArticleDetail(){
      getDetailDeleted(this.$route.params.articleId).then(response =>{
        this.article=response.data.article
      })
    }
  }
}
</script>

<style scoped>
.article{
  margin-top: 20px;
}
/*.strong{
  display: flex;
  justify-content: space-around;
}*/
</style>
